<!DOCTYPE html>
<html>

<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <div class="container">
            <div v-if="!join" id="join" class="text-center">
                <form @submit.prevent="joinChat(name)">
                    <div class="form-group">
                        <input type="text" max="12" class="form-control input-lg text-center" v-model="name" placeholder="Name">
                    </div>
                    <button class="btn btn-primary btn-lg" type="submit">Join Chat</button>
                </form>
            </div>
            <div v-else id="group">
                <div class="users">
                    <h4>Users</h4>
                    <ul class="list-unstyled">
                        <li v-for="user in users" track-by="$index" :class="user==name?'current-u':''">{{user}}</li>
                    </ul>
                </div>
                <div class="chat">
                    <div class="messages">
                        <ul class="list-unstyled">
                            <li v-for="m in messages" :class="{me: (m.name === name), clearfix: true}">
                                <div class="name">{{m.name}}</div>
                                <span>{{m.message}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="input">
                        <form @submit.prevent="send(message)">
                            <div class="input-group">
                                <input type="text" class="form-control" v-model="message" placeholder="typing something...">
                                <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">-></button>
                          </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/socket.io-client/dist/socket.io.slim.js"></script>
    <script src="https://unpkg.com/vue-socket.io-extended/dist/vue-socket.io-ext.min.js"></script>
    <script>
    Vue.use(VueSocketIOExt, io());
    new Vue({
        el: '#app',
        data: {
            join: false,
            name: null,
            users: {},
            message: null,
            messages: []
        },
        methods: {
            joinChat: function(name) {
                if (name) {
                    this.$socket.emit('join', name);
                }
            },
            send: function(message) {
                if (message) {
                    this.$socket.emit('send', {
                        name: this.name,
                        message: message
                    });
                    this.$set(this, 'message', null);
                }
            }
        },
        watch: {
            messages: function() {
                if(this.join){
                    setTimeout(function () {
                        document.querySelector('.messages ul').scrollTop = 999999999;
                    }, 100)
                }
            }
        },
        sockets: {
            users: function(users) {
                this.$set(this, 'users', users)
            },
            joined: function(data) {
                this.$set(this, 'join', true);
            },
            messages: function(data) {
                this.messages.push(data);
                console.log(data)
            },
            hello: function(data) {
               console.log(data);
            }
        }
    });
    </script>
</body>

</html>